<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>千峰商城</title>
    <script src="../utils/flexible.js"></script>
    <script src="../utils/getUrlParams.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="../css/base.css" />
    <link rel="stylesheet" href="../css/productlist.css" />
    <script src="../js/productlist.js"></script>
    <link rel="icon" href="../assets/imgs/facicon.ico" type="image/x-icon" />
  </head>

  <body>
    <div class="header" id="top">
      <img src="../assets/imgs/header_logo.png" alt="" />
      <img src="../assets/imgs/header_app.png" alt="" />
    </div>
    <div class="searchbox">
      <input type="text" placeholder="请输入你想比价的产品" />
      <button style="color: white">搜索</button>
    </div>

    <div class="nav">
      <a href="../index.html">首页</a> > <a class="categoryAll">全部分类</a> >
      <a class="replace" href="">电视</a> >
      <button>筛选</button>
    </div>

    <div class="container">
      <ul></ul>
    </div>

    <div class="footer">
      <div class="more">
        <a>更多优惠信息>></a>
      </div>
      <div class="chart">
        <span>品牌排行</span>
      </div>
      <ul>
        <li>登入</li>
        <li>注册</li>
        <li><a href="#top" style="color: black">返回顶部</a></li>
      </ul>
      <p>手机APP下载 万锋智慧商城手机版 -- 掌上比价平台</p>
      <p>chst.vip:8081/crm</p>
    </div>

    <script>
      let href = getUrlParams(location.href);
      let html;
      let page;
      $.ajax({
        url: "http://chst.vip:1234/api/getproductlist?",
        data: {
          categoryid: href.categoryid,
          pageid: href.pageid,
        },
      }).then((res) => {
        // console.log(res);
        page = Math.ceil(res.totalCount / res.pagesize);
        creatLi(res.result);
        $(".container >ul >li").on("click", "button", clickBtnHandle);
        $(".container >ul >li ").on("click", "select", clickOptionHandle);
        $(".container >ul").on("click", "li", clickLihandler);
        $(".categoryAll").click(function () {
          location.href = "./category.html";
        });
      });

      function clickLihandler(e) {
        let productid = $(this).attr("productid");
        let productname = $(this).find("p").first().text().trim();
        let categoryid = $(".nav .replace").attr("categoryid");
        let categoryname = $(".nav .replace").text();
        console.log(categoryid);
        // console.log(categoryname);
        // String.replit
        // console.log(productname.split(" ")[0]);
        location.href =
          "./productdetails.html?productid=" +
          productid +
          "&productname=" +
          productname.split(" ")[0] +
          "&categoryname=" +
          categoryname +
          "&categoryid=" +
          categoryid;
      }

      function clickOptionHandle(e) {
        e.preventDefault();
        e.stopPropagation();
        if ($(this).val() != href.pageid) {
          href.pageid = $(this).val();
          location.href =
            "./productlist.html?pageid=" +
            href.pageid +
            "&categoryid=" +
            href.categoryid;
        }
      }

      function clickBtnHandle(e) {
        e.preventDefault();
        e.stopPropagation();

        console.log(href.pageid);
        href.pageid = Number(href.pageid);
        if ($(this).prop("class") == "btn1") {
          href.pageid--;
        } else {
          console.log("object");
          href.pageid++;
        }
        if (href.pageid > 3) {
          href.pageid = 3;
        }
        if (href.pageid < 1) {
          // console.log("object");
          href.pageid = 1;
        }
        console.log(href.pageid);
        location.href =
          "./productlist.html?pageid=" +
          href.pageid +
          "&categoryid=" +
          href.categoryid;
      }

      function creatLi(data) {
        html = "";
        data.forEach((item) => {
          // console.log(item);
          html += `
                <li productid="${item.productId}">
                    ${item.productImg}
                    <div class="right">
                        <p>
                            ${item.productName}
                        </p>
                        <p>${item.productPrice}</p>
                        <span>${item.productQuote}</span> <span>${item.productCom}</span>
                    </div>
                </li>
                `;
        });
        html += ` <li>
                <button class="btn1">上一页</button>
                <select name="" id="">`;
        for (let i = 0; i < page; i++) {
          html += `
                    <option value="${i + 1}">${i + 1}/${page}</option>
                `;
        }
        html += `</select>
                <button class="btn2">下一页</button>
            </li>`;
        $(".container ul").html(html);
        console.log(href);
        $(".nav .replace")
          .attr("categoryid", href.categoryid)
          .text(href.categoryname);
        $(".container ul li select").val(href.pageid);
      }
    </script>
  </body>
</html>
